<template>
    <div class="loginContainer">
        <el-form :model="form" ref="registerForm" class="registerForm" :rules="rules">
            <el-form-item prop="username">
                <el-input
                    clearable
                    :prefix-icon="userIcon"
                    placeholder="请输入用户名"
                    v-model="form.username"
                ></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input
                    clearable
                    :show-password="true"
                    placeholder="请输入密码"
                    v-model="form.password"
                    type="password"
                    :prefix-icon="lockIcon"
                ></el-input>
            </el-form-item>
            <el-form-item prop="checkPassword">
                <el-input
                    clearable
                    :show-password="true"
                    placeholder="请再次输入密码"
                    v-model="form.checkPassword"
                    type="password"
                    :prefix-icon="lockIcon"
                ></el-input>
            </el-form-item>
            <el-form-item prop="sex">
                <el-radio-group v-model="form.sex">
                    <el-radio label="男" name="sex" value="男" border></el-radio>
                    <el-radio label="女" name="sex" value="女" border></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item prop="telephone">
                <el-input
                    clearable
                    placeholder="请输入手机号"
                    v-model="form.telephone"
                    :prefix-icon="phoneIcon"
                ></el-input>
            </el-form-item>
            <el-form-item prop="email">
                <el-input
                    clearable
                    placeholder="请输入邮箱（选填）"
                    v-model="form.email"
                    :prefix-icon="mailIcon"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="registerHandler" block>添加管理员</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
// @ is an alias to /src
import service from "@/utils/request";
import { ElMessage } from "element-plus";
import { User, Lock, Phone, Message } from "@element-plus/icons-vue";
import { markRaw } from "vue";

export default {
    name: "RegisterView",
    data() {
        return {
            form: {
                username: "",
                password: "",
                checkPassword: "",
                sex: "",
                telephone: "",
                email: "",
            },
            userIcon: markRaw(User),
            lockIcon: markRaw(Lock),
            phoneIcon: markRaw(Phone),
            mailIcon: markRaw(Message),
            rules: {
                username: [
                    { required: true, message: "用户名不能为空" },
                    { min: 2, max: 20, message: "用户名应在2-20个字符之间" },
                ],
                password: [
                    { required: true, message: "密码不能为空" },
                    { min: 3, message: "密码至少为3位" },
                ],
                checkPassword: {
                    required: true,
                    validator: (rule, value, callback) => {
                        if (value === "") {
                            callback(new Error("请确认密码"));
                        } else if (value !== this.form.password) {
                            callback(new Error("两次输入密码不一致"));
                        } else {
                            callback();
                        }
                    },
                    trigger: "blur",
                },
                sex: { required: true, message: "请选择性别" },
                telephone: {
                    required: true,
                    validator: (rule, value, callback) => {
                        if (value === "") {
                            callback(new Error("请输入手机号"));
                        } else if (
                            !value.match(/^(13[0-9]|14[01456789]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/)
                        ) {
                            callback(new Error("手机号格式有误"));
                        } else {
                            callback();
                        }
                    },
                },
                email: {
                    validator: (rule, value, callback) => {
                        if (!value.match(/^\w+@[a-z0-9]+.[a-z]{2,4}$/) && value !== "") {
                            callback("邮箱格式有误");
                        } else {
                            callback();
                        }
                    },
                },
            },
        };
    },
    methods: {
        registerHandler() {
            this.$refs.registerForm.validate((valid) => {
                if (valid) {
                    service({
                        method: "post",
                        url: "/user/saveUser",
                        headers: {
                            "Content-type": "application/json",
                        },
                        data: {
                            ...this.form,
                            isAdmin: 1,
                            userState: 1,
                        },
                    }).then((res) => {
                        ElMessage({
                            type: "success",
                            message: "添加管理员成功",
                        });
                        this.$emit("close");
                    });
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped></style>
